<template>
    <view>

        <ul class="formBox">
            <li class="formBox-common">
                <span><input type="text" v-model="mobile" placeholder="请输入您的手机号"></span>
            </li>
            <li class="formBox-code">
                <div class="code-div"><p class="code-p"><input type="text" v-model="code" placeholder="请输入短信验证码" class="code-input"></p></div>
                <span class="code-span"><i @click="showKaptcha()" class="code-i">{{countdown===0?'获取验证码':countdown}}</i></span>
            </li>
        </ul>

        <!-- <view class="agree">
            <checkbox-group @change="checkBoxChange" style="display: inline-block;">
                <checkbox style="transform:scale(0.7)" value="1"/>
            </checkbox-group>
            我已阅读并同意
            <text @click.stop="Common.toUrl('/pages/index/agreement/index?id=76')">《服务协议》</text>
            &
            <text @click.stop="Common.toUrl('/pages/index/agreement/index?id=77')">《隐私政策》</text>
        </view> -->

        <div class="uni-btn" style="margin:30px 20px 0 20px;" @click="submit()">确定</div>

        <Kaptcha ref="kaptcha" @refresh="getSmsCode"></Kaptcha>

    </view>
</template>

<script>
import {LoginApi} from '@/api/user/LoginApi.js'
import {UserApi} from '@/api/user/UserApi.js'
import {Regexp} from '@/utils/Regexp.js'
import Kaptcha from "@/components/Kaptcha";

export default {
    components: {
        Kaptcha
    },
    data() {
        return {
			Config: this.$Config,
			Common: this.$Common,
			Auth: this.$Auth,
			ShareUtil: this.$ShareUtil,
			State: this.$store.state,
			Dict: this.$Dict,

            mobile: "",
            code: "",
            countdown: 0,
            agree: [],
            action:""
        }
    },
    onLoad(e) {

    },
    methods: {
        showKaptcha(){
            if(this.countdown > 0){
                return false
            }

            if(!this.mobile){
                uni.showToast({title: '请输入手机号',icon: 'none'});
                return false
            }

            if(!Regexp.MOBILE.test(this.mobile)){
                uni.showToast({title: '手机号格式不正确',icon: 'none'});
                return false
            }

            this.$refs['kaptcha'].show()
        },
        getSmsCode(data){
            let that = this
            data['mobile']=this.mobile
            LoginApi.sendRegVerificationCode(data).then((response)=>{
                that.countdown = 120
                that.countdownMethod()

                uni.showToast({title: '验证码已发送',icon: 'success'});
            })
        },
        countdownMethod() {
            let that = this
            if (that.countdown > 0) {
                that.countdown--;
                setTimeout(function(){
                    that.countdownMethod()
                }, 1000);
            }
        },
        submit(){
            let that = this
            if(!that.mobile){
                uni.showToast({title: '请输入手机号',icon: 'none'});
                return false
            }

            if(!Regexp.MOBILE.test(that.mobile)){
                uni.showToast({title: '手机号格式不正确',icon: 'none'});
                return false
            }

            if(!that.code){
                uni.showToast({title: '请输入验证码',icon: 'none'});
                return false
            }
            if(that.code.length !==4){
                uni.showToast({title: '验证码长度不正确',icon: 'none'});
                return false
            }


            // if (!that.agree || that.agree.length === 0) {
            //     uni.showModal({
            //         title: '提示',
            //         content: '请阅读并勾选同意《服务协议》&《隐私政策》',
            //         showCancel:false
            //     });

            //     return false
            // }

            let data = {
                mobile: that.mobile,
                code: that.code
            }

            UserApi.updateMobile(data).then((response)=>{
                this.$store.dispatch('user/getInfo').then(()=>{
                    that.Common.navigateBackRefresh()
                })
            })
        },
        checkBoxChange(e) {
            this.agree = e.detail.value
        }
    }
}
</script>

<style lang="scss">
.login-logo {text-align: center; margin-top:40px;}
.login-logo image{width:80px; height:80px;border-radius: 10px;}

/*表单*/
.formBox{ padding:0 0px; margin:40px 20px 20px 20px;}
.formBox li{ margin-top:20px; overflow:hidden; background:#FFF; height:40px;}
.formBox .formBox-code .code-div{ width:65%; float:left; }
.formBox .formBox-code .code-div .code-p{ padding:0 10px; border-width:0; }
.formBox .formBox-code .code-div .code-p .code-input{font-size:14px; border:none; width:100%; height:40px; line-height: 40px; padding:0 10px;}
.formBox .formBox-code .code-span{ width:35%;  display:block; float:right; }
.formBox .formBox-code .code-span .code-i{ height:100%; line-height:41px; display:block; overflow:hidden;
    background:#FF8A00;font-size:14px; font-style: normal;
    text-align:center; color:#FFF;}
.formBox .formBox-common span{ padding:0px 10px; display:block;}
.formBox .formBox-common input{ font-size:14px; border:none; width:100%; background:#FFF; height:40px; line-height: 40px; padding:0 10px;}
.formBox .formBox-btn a{ width:100%; height:40px; line-height:40px; text-align:center; background:#FFDA44; border:none;
    font-size:15px; border-radius:5px; display:block; }

.formBox-a a{ width:47%; height:38px; line-height:40px; border:1px solid #EB877E; border-radius:5px; display:block; float:left; color:#E72110 !important; text-align:center;}
.formBox-a .formBox-right{ float:right; }

.login-reg{ margin-top:20px; text-align:center; font-weight:bold;}

.agree {margin-top:30px; font-size: 12px; padding-left: 10px;}
.agree label {font-size: 12px;}
.agree text {font-size: 12px; color:#0084FE;}
</style>
